<template>
    <div class="common-layout">
        <el-table :data="state.data" height="900" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        :default-sort="state.sort"
        style="width: 100%">
            <el-table-column prop="date" label="date" width="180" sortable/>
            <el-table-column prop="中证全指" label="中证全指" width="100"/>
            <el-table-column prop="中证全指LP" label="中证全指LP" width="100"/>
            <el-table-column prop="交易净额" label="交易净额" sortable width="160">
                <template #default="scope">
                    {{ formatCurrency(scope.row['交易净额']) }}
                </template>
            </el-table-column>
            <el-table-column prop="sum" label="次数总计" width="180" sortable />
            <el-table-column prop="buyCount" label="买入次数" width="180" sortable/>
            <el-table-column prop="sellCount" label="卖出次数" width="180" sortable/>
            <el-table-column prop="dividendCount" label="分红次数" width="180" sortable/>
        </el-table>
    </div>
</template>

<script>
import { computed, reactive } from 'vue';
import { getSessionStorage, setSessionStorage } from '@/utils/help';
import { getOperationSta } from '@/service/operation';
import { formatCurrency, getLpClassName } from '../../utils/help';

export default {
    setup() {
        const baseKey = "wugu"
        const selectKey = baseKey + "Select"
        const sortPropKey = baseKey + "SortProp"
        const sortOrderKey = baseKey + "SortOrder"

        const state = reactive({
            rawData: [],
            data: [],
            selected: getSessionStorage(selectKey) || '全部',
            sort: { 
                prop: getSessionStorage(sortPropKey) || 'date' , 
                order: getSessionStorage(sortOrderKey) || '' 
            }
        })

        getOperationSta().then( res => {
            state.rawData = res.data
            state.data = res.data

            state.data.forEach(item => {
                item['sum'] = item['buyCount'] + item['sellCount']
            })
        })

        const sortChange = (column, prop, order) => {
            setSessionStorage(sortPropKey, column.prop)
            setSessionStorage(sortOrderKey, column.order)
        }
        

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if (columnProperty == "中证全指LP") {
                return getLpClassName(row["中证全指LP"])
            }

            if (columnProperty == "中证全指") {
                if (row["中证全指"] < 0) {
                    return "lt0-cell"
                }
            }

            if (columnProperty == '交易净额') {
                if (row['交易净额'] < 0) {
                    return "lt0-cell"
                }
            }
            return ''
        }

        return {state, tableCellClassName,sortChange, formatCurrency}
    }
}
</script>

<style>
</style>